<template>
  <el-header height="60px">
    <div class="header-container">
      <div class="flex">
        <router-link to="home" style="text-decoration: none">
          <div class="logo-container" v-if="!showLogo">
            <img src="@/assets/img/logo-new.png" />
          </div>
          <div class="logo-container" v-if="logo">
            <a class="logo-link">
              <img :src="logo" style="margin-top: 0; height: 48px" />
            </a>
          </div>
        </router-link>
      </div>
      <div class="flex header-right">
        <!-- <el-autocomplete
          popper-class="my-autocomplete"
          size="small"
          class="inline-input"
          v-model="searchWork"
          :fetch-suggestions="querySearch"
          placeholder="搜索菜单"
          :trigger-on-focus="false"
          @select="handleSelect"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
          <template slot-scope="{item}">
            <div class="alias">{{ item.name }}({{ item.alias }})</div>
          </template>
        </el-autocomplete> -->
        <div class="optionBtns">
          <el-link
            class="top-btn"
            :underline="false"
            style=""
            @click="handleScreenFull"
            :title="isScreenFull ? '退出全屏' : '全屏'"
          >
            <i
              :class="[
                isScreenFull
                  ? 'icon-nav-fullscreen-cancel'
                  : 'icon-nav-fullscreen'
              ]"
              class="top-link-icon"
            >
            </i>
            <span class="top-text">{{
              isScreenFull ? '退出全屏' : '全屏'
            }}</span>
          </el-link>
          <el-popover
            popper-class="header-popper top-btn"
            :visible-arrow="false"
            trigger="hover"
          >
            <el-link
              class="top-btn clear-cache-wrap"
              slot="reference"
              :underline="false"
              ><i class="icon-eliminate top-link-icon"></i
              ><span class="clear-cache-text">清除缓存</span>
              <i class="icon-nav-user-unfold triangle-icon top-text"></i>
            </el-link>
            <template>
              <ul class="user-link-ul clear-cache">
                <li @click="clearCache('清除用户模块缓存', 'uc', 'eip:uc')">
                  清除用户模块缓存
                </li>
                <li
                  @click="clearCache('清除系统设置缓存', 'portal', 'eip:sys')"
                >
                  清除系统设置缓存
                </li>
                <li @click="clearCache('清除所有缓存', '', 'eip')">
                  清除所有缓存
                </li>
              </ul>
            </template>
          </el-popover>
          <el-divider direction="vertical"></el-divider>
        </div>
        <!-- <lang-select /> -->
        <!-- <el-divider direction="vertical" class="divider-item"></el-divider> -->
        <el-popover
          popper-class="header-popper"
          :visible-arrow="false"
          width="208"
          trigger="hover"
        >
          <HtAvatar slot="reference" :user="currentUser" isShowTriangle />
          <template>
            <div>
              <div class="flex user-box-header">
                <HtAvatar style="margin-right: 15px" :user="currentUser" />
                <div>
                  <h3
                    v-if="$store.state.login.currentUser"
                    style="margin: 5px 0"
                  >
                    {{ $store.state.login.currentUser.username }}
                  </h3>
                </div>
              </div>
              <!-- <span style="color: #c9c9c9">|</span> -->
              <el-divider class="user-box-divider"></el-divider>
              <div class="flex user-box-logout" @click="logout">
                <el-link :underline="false" class="icon-user-logout">退出系统</el-link>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>

    <ht-sidebar-dialog
      width="28%"
      title="风格设置"
      :visible="styleSettingDialogVisible"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form :model="styleSetting" style="margin-left: -30px">
        <ht-form-item label="标签页风格" label-width="100px">
          <el-radio-group v-model="styleSetting.tabsStyle.tabType">
            <el-radio-button label="card">选项卡样式</el-radio-button>
            <el-radio-button label>默认样式</el-radio-button>
            <el-radio-button label="border-card">卡片化</el-radio-button>
            <el-radio-button label="menuSetting">菜单配置</el-radio-button>
          </el-radio-group>
        </ht-form-item>
      </el-form>
    </ht-sidebar-dialog>

    <ht-sidebar-dialog
      title="查看个人信息"
      :visible="infoDialogVisible"
      width="28%"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form
        v-if="currentUser && currentUser.user"
        :inline="true"
        ref="form"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="用户名称:" style="width: 50%">
          <span class="content_span">{{ currentUser.user.fullname }}</span>
        </el-form-item>
        <el-form-item label="用户账号:">
          <span class="content_span">{{ currentUser.user.account }}</span>
        </el-form-item>
        <el-form-item label="手机号码:" style="width: 50%">
          <span class="content_span">{{ currentUser.user.mobile }}</span>
        </el-form-item>
        <el-form-item label="邮箱地址:">
          <span class="content_span">{{ currentUser.user.email }}</span>
        </el-form-item>
        <el-form-item label="用户性别:" style="width: 50%">
          <span class="content_span">{{ currentUser.user.sex }}</span>
        </el-form-item>
        <el-form-item label="用户状态:">
          <span class="content_span">{{
            currentUser.user.status == '1'
              ? '正常'
              : currentUser.user.status == '0'
              ? '禁用'
              : currentUser.user.status == '-1'
              ? '未激活'
              : '离职'
          }}</span>
        </el-form-item>

        <el-form-item label="地址:" style="width: 100%">
          <span class="content_span">{{ currentUser.user.address }}</span>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属角色:">
          <template v-for="name in currentUser.role">
            <el-tag type="warning" size="small" :key="name" v-if="name">{{
              name
            }}</el-tag>
          </template>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属岗位:">
          <el-tooltip
            :content="post.pathName"
            placement="top"
            :key="post.postId"
            v-for="post in currentUser.post"
          >
            <el-tag type="success" size="small">{{ post.postName }}</el-tag>
          </el-tooltip>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属组织:">
          <el-tooltip
            :content="org.pathName"
            placement="top"
            :key="org.orgId"
            v-for="org in currentUser.org"
          >
            <el-tag size="small">{{ org.orgName }}</el-tag>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </ht-sidebar-dialog>

    <ht-sidebar-dialog
      title="修改密码"
      :visible.sync="modifyPwdDialogVisible"
      :close-on-click-modal="false"
      width="28%"
      id="modlfy-dialog"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form
        :model="pwdForm"
        :rules="pwdRules"
        ref="pwdForm"
        label-width="120px"
        size="mini"
      >
        <el-form-item label="旧密码" prop="old">
          <el-input
            type="password"
            v-model="pwdForm.old"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input
            type="password"
            placeholder="请输入新密码"
            v-model="pwdForm.new"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="newRepeat">
          <el-input
            type="password"
            placeholder="请再次输入新密码"
            v-model="pwdForm.newRepeat"
          ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" style="text-align: center; bottom: auto">
        <el-button size="small" type="primary" @click="submitForm()"
          >确认</el-button
        >
        <el-button size="small" @click="modifyPwdDialogVisible = false"
          >取 消</el-button
        >
      </span>
    </ht-sidebar-dialog>

    <el-dialog
      title="关于平台"
      :visible.sync="aboutPlatformDialogVisible"
      append-to-body
      width="600px"
    >
      <div class="about-platform">
        <div class="platform-profile">
          <i class="icon-hotent-H"></i>
          <div class="platform-detail">
            <span class="platform-name">EIP 企业信息平台</span>
            <span class="platform-version" v-if="platformVersion"
              >平台版本：{{ platformVersion }}</span
            >
          </div>
        </div>
        <span class="copyright">
          Copyright © 版权所有
          <a href="https://hotent.com" target="_blank"
            >广州宏天软件股份有限公司</a
          >
          2008-2022
        </span>
      </div>
    </el-dialog>
  </el-header>
</template>

<script>
import HtAvatar from '@/components/common/HtAvatar.vue'
import LangSelect from '@/components/lang/LangSelect.vue'
import screenfull from 'screenfull'
import {mapState} from 'vuex'
import req from '@/request.js'

export default {
  name: 'navigator',
  components: {HtAvatar, LangSelect},
  props: ['menuShow'],
  data() {
    var validateNew = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      }
      let config = this.pwdStrategy
      if (config.enable == 1) {
        let pwdRule = config.pwdRule
        let pwdLength = config.pwdLength
        if (pwdRule) {
          if (value.length < pwdLength) {
            callback(new Error('新密码长度至少为' + pwdLength))
          } else if (pwdRule == 2) {
            var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、字母'))
            } else {
              callback()
            }
          } else if (pwdRule == 3) {
            var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])')
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、字母、特殊字符'))
            } else {
              callback()
            }
          } else if (pwdRule == 4) {
            var re = new RegExp(
              '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
            )
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、大小字母、特殊字符'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        if (value.length < 6) {
          callback(new Error('新密码长度至少为6'))
        } else {
          callback()
        }
      }
    }
    var validateold = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    var validateNewReapeat = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else {
        callback()
      }
    }
    return {
      logo: '',
      platformVersion: '',
      showLogo: true,
      isScreenFull: false,
      styleSettingDialogVisible: false,
      styleSetting: {
        tabsStyle: {
          tabPosition: 'top',
          tabType: 'border-card'
        },
        elementUI: {
          theme: 'day-theme'
        }
      },
      searchWork: '',
      searchMenus: [],
      infoDialogVisible: false,
      modifyPwdDialogVisible: false,
      pwdForm: {
        old: '',
        new: '',
        newRepeat: ''
      },
      pwdRules: {
        old: [{validator: validateold, trigger: 'blur'}],
        new: [{validator: validateNew, trigger: 'blur'}],
        newRepeat: [{validator: validateNewReapeat, trigger: 'blur'}]
      },
      isIeExplorer: false,
      menuSelected: '',
      aboutPlatformDialogVisible: false
    }
  },
  computed: {
    ...mapState({
      menus: state => state.menu.menus,
      currentUser: state => state.user.currentUserDetail,
      token: state => state.login.currentUser.token,
      frontUrl: function() {
        if (
          this.currentUser &&
          this.currentUser.user &&
          this.currentUser.user.account &&
          (!window.ssoConfig.mode || window.ssoConfig.mode == 'jwt')
        ) {
          return `${window.context.front}?token=` + this.token
        } else {
          return `${window.context.front}`
        }
      },
      pwdStrategy: state => state.user.pwdStrategy
    })
  },
  watch: {
    styleSetting: {
      handler: function(val, oldval) {
        let str = JSON.stringify(val)
        localStorage.setItem('styleSetting', str)
        this.$store.dispatch('styleSetting/actionStyleSetting', JSON.parse(str))
      },
      deep: true //对象内部的属性监听，也叫深度监听
    },
    aboutPlatformDialogVisible: function(newVal, oldval) {
      if (newVal && newVal != oldval) {
        if (this.platformVersion == '') {
          req
            .get(window.context.uc + '/base/tools/v1/getPlatformVersion')
            .then(rep => {
              if (rep && rep.data && rep.data.state) {
                this.platformVersion = rep.data.value
              }
            })
        }
      }
    },
  },
  methods: {
    clearExtUniteToken() {
      this.$confirm('是否确认清除缓存数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.toClearExtUniteToken()
        })
        .catch(() => {})
    },
    toClearExtUniteToken() {
      this.$http
        .get('${portal}/portal/sysExternalUnite/v1/clearToken')
        .then(() => {
          this.$message.success('清除企微钉钉缓存成功')
        })
    },
    clearCache(modelName, model, key) {
      this.$confirm('是否确认清除缓存数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //分服务部署模式下，清除所有缓存。调用各个微服务的清除缓存方法
          if (!model && key == 'eip') {
            if (window.context.uc != window.context.portal) {
              ;['uc', 'portal', 'form', 'bpmRunTime', 'bpmModel'].forEach(
                ele => {
                  this.toClearCache(`清除${ele}模块缓存`, ele, key)
                }
              )
            } else {
              this.toClearCache(modelName, 'portal', key)
            }
          } else {
            this.toClearCache(modelName, model, key)
          }
        })
        .catch(() => {})
    },
    toClearCache(modelName, model, key) {
      this.$http
        .get('${' + model + '}/base/tools/v1/clearCacheByKey?key=' + key)
        .then(() => {
          this.$message.success(`${modelName}成功`)
        })
    },
    submitForm() {
      let this_ = this
      this.$refs['pwdForm'].validate(valid => {
        if (valid) {
          if (this.pwdForm.newRepeat != this.pwdForm.new) {
            this.$message.warning(`重复新密码与新密码不一致!`)
            return
          }
          this.$http
            .post('${uc}/api/user/v1/user/changUserPsd', {
              oldPwd: this.pwdForm.old.encryptWithRsa(),
              newPwd: this.pwdForm.new.encryptWithRsa()
            })
            .then(resp => {
              let data = resp.data
              if (data && data.state) {
                this.modifyPwdDialogVisible = false
                this.$alert('修改密码成功, 请使用新密码重新登录。', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    //退出登录
                    this_.logout()
                  }
                })
              }
            })
        }
      })
    },
    openInfoDialog() {
      this.infoDialogVisible = true
    },
    openResetPwdDialog() {
      this.$store.dispatch('user/getDefPwdStrategy')
      this.modifyPwdDialogVisible = true
      if (this.$refs['pwdForm']) {
        this.$refs['pwdForm'].resetFields()
      }
    },
    logout() {
      let loginRouthPath =
        localStorage.getItem(
          this.$store.state.login.currentUser.account + 'loginRoutePath'
        ) || '/login'
      this.$store.dispatch('menu/actionMenusEmpty')
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            this.$router.push({
              path: loginRouthPath
            })
            break
        }
      })
    },
    //全屏与退出全屏操作
    handleScreenFull(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(document.getElementsByTagName('body')[0])
      screenfull.on("change", () => {
        if (screenfull.isFullscreen) {
          this.isScreenFull = true
        } else {
          this.isScreenFull = false
        }
      })
      // this.isScreenFull = !this.isScreenFull
    },
    handleStyleSettingDialog() {
      let styleSetting = localStorage.getItem('styleSetting')
      if (styleSetting && styleSetting != 'null') {
        this.styleSetting = JSON.parse(styleSetting)
      }
      this.styleSettingDialogVisible = true
    },
    handleStyleSettingDialogClose() {
      this.styleSettingDialogVisible = false
      this.infoDialogVisible = false
      this.modifyPwdDialogVisible = false
    },
    querySearch(queryString, cb) {
      // 查询出二级三级的菜单
      let menus = []
      menus = [...this.menus]
      if (queryString) {
        this.searchMenus = []
        this.preFilterMenus(this.menus, queryString)
      } else {
        this.searchMenus = menus
      }
      // 调用 callback 返回建议列表的数据
      this.searchMenus = this.searchMenus.unique('alias')
      cb(this.searchMenus)
    },
    preFilterMenus(menus, queryString) {
      if (menus instanceof Array) {
        menus.forEach(x => {
          this.filterMenus(x, queryString)
        })
      } else {
        this.filterMenus(menus, queryString, true)
      }
    },
    filterMenus(x, queryString, isComponent) {
      if (x.children) {
        let r = x.children.filter(menu => {
          this.preFilterMenus(menu, queryString)
          return (
            menu.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
            menu.alias.toLowerCase().indexOf(queryString.toLowerCase()) != -1
          )
        })
        if (r && r.length >= 1) {
          r.forEach(y => {
            if (isComponent) {
              y.parentComponent = x
            }
            this.searchMenus.push(y)
          })
        }
      }
    },
    handleSelect(item) {
      if (!item.parentComponent) {
        this.$router.push({path: `/${item.alias}`})
      } else {
        this.$router.push({
          path: `/${item.parentComponent.alias}#${item.alias}`
        })
      }
    },
    //获取系统默认配置 系统Logo、名称
    sysSetting() {
    },
    getMenuByMenuId(menuId) {
      let innerFun = menus => {
        if (!menus || menus.length == 0) {
          return
        }
        for (let i = 0; i < menus.length; i++) {
          if (menus[i].id === menuId) {
            return menus[i]
          }
          let menu = innerFun(menus[i].children)
          if (menu) {
            return menu
          }
        }
      }
      return innerFun(this.menus)
    },
  },
  mounted() {
    !this.currentUser && this.$store.dispatch('user/loadCurrentUserDetail')
    const currentUser = this.$store.state.login.currentUser
    if (currentUser) {
      let userAttrs = this.$store.state.login.currentUser.userAttrs
      if (userAttrs) {
        //租户
        const tenantId = userAttrs.tenantId
        if (tenantId) {
          let _this = this
          let url = '${uc}/uc/tenantManage/v1/getJson?id=' + tenantId
          this.$http.get(url).then(
            resp => {
              if (resp.data) {
                let tenantManage = resp.data
                if (tenantManage.manageLogo) {
                  let manageLogo = JSON.parse(tenantManage.manageLogo)
                  if (manageLogo && manageLogo.length > 0) {
                    _this.showLogo = true
                    _this.logo = `${window.context.portal}/system/file/v1/getLogoFile?logoType=manage&tenantId=${tenantManage.id}`
                  }
                } else {
                  _this.showLogo = false
                }
              }
            },
            error => {
              _this.showLogo = false
              reject(error)
            }
          )
        } else {
          //不是租户
          this.sysSetting()
        }
      } else {
        //不是租户
        this.sysSetting()
      }
    } else {
      //不是租户
      this.sysSetting()
    }
  },
  created() {
    let USER_AGENT = navigator.userAgent.toLowerCase()
    let isChrome = /.*(chrome)\/([\w.]+).*/
    if (!isChrome.test(USER_AGENT)) {
      this.isIeExplorer = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
/deep/.el-divider {
  background: #9f9f9f;
  margin: 0;
}
.divider-item {
  margin: 0 24px;
}
.optionBtns {
  padding: 0 16px;
}
.top-btn {
  .top-text {
    padding-right: 24px;
    font-size: 16px;
    font-weight: 400;
    color: $project-color;
  }
  .clear-cache-text {
    font-size: 16px;
    font-weight: 400;
    color: $project-color;
  }
  .triangle-icon {
    padding-left: 10px;
  }
}
.clear-cache-wrap {
  &:hover {
    .triangle-icon {
      transform: rotateZ(180deg);
      padding-left: 24px;
      padding-right: 10px;
    }
  }
}
.navbar-menu-collapse {
  cursor: pointer;
  width: $project-header-height;
  height: $project-header-height;
  background: $project-collapse-bg;
  text-align: center;
  line-height: $project-header-height;
}

.navbar-menu-collapse > i {
  font-size: 18px;
  margin: 13px;
  color: $project-color;
}

.logo-container {
  margin-left: 24px;
  cursor: default;
  display: flex;
}

.logo-container > i.icon-hotent-H-c {
  font-size: 36px;
  background-image: linear-gradient($--color-secondary, $--color-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-right: -5px;
}

.logo-container > i.icon-hotent-H-ie {
  font-size: 36px;
  background-clip: text;
  -webkit-background-clip: text;
  color: $--color-primary;
  margin-right: -5px;
}

.logo-container:hover > i.icon-hotent-H-c {
  background-image: linear-gradient($--color-primary, $--color-secondary);
}

.logo-container > span.pre-word {
  font-size: 26px;
  font-weight: bold;
  color: $--color-primary;
}

.logo-container > span.tail-word {
  font-size: 24px;
  // font-weight: bold;
  color: #bdbfc2;
}

.header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
  width: 100%;
  height: $project-header-height;
  // line-height:$project-header-height ;
}

.logo-link {
  margin-left: 30px;
  font-weight: bold;
  font-size: 18px;
  color: #2274af;
  text-decoration: none;
}

.nav-logo {
  width: 25px;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  margin-top: -6px;
}

.header-right {
  margin-right: 24px;
  align-items: center;
  justify-content: space-between;
}

.header-right > .el-link,
.header-right > span > .el-link {
  margin-right: 15px;
  font-size: 13px;
}

.header-right > .el-link:hover,
.header-right > span > .el-link:hover {
  color: #ff7717;
}

.top-link-icon {
  font-size: 20px;
  padding-right: 8px;
  color: $project-color;
  // font-weight: bold;
}
.icon-computer {
  font-size: 22px;
}

.top-message-header {
  background: #f7f7f7;
  justify-content: space-between;
  padding: 5px 10px;
}

  .user-box-divider {
    // margin: 10px 0;
    background: #E6E6E6;
  }

  .user-box-header {
    padding: 8px 16px;
  }

.inline-input {
  margin-right: 15px;
  width: 288px;
  margin-right: 24px;
  /deep/.el-input__inner {
    border-radius: 2px;
  }
  /deep/.el-input__suffix {
    color: #888;
    .el-icon-search {
      font-size: 16px;
    }
  }
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


  .clear-cache {
    padding: 5px;
  }
  .user-link-ul{
    padding: 8px 0;
    border-bottom: 1px solid #E6E6E6;
  }
  .user-link-ul > li {
    padding: 0px 16px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
  }

  .user-link-ul > li > i {
    margin-right: 10px;
    font-size: 16px;
  }

  .user-link-ul > li:hover {
    background: #F9F9F9;
    color: #409EFF;
  }

.top-message-more {
  border-top: 1px solid #dedede;
  margin-top: 10px;
  padding: 10px;
}

.top-message-body {
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

.top-message-more > a:hover,
.top-message-more > a:focus {
  color: #555;
}

  .user-box-logout {
   
    margin: 8px 0 4px 0;
    
    ::v-deep{
       .icon-user-logout{
        justify-content: flex-start;
        padding-left: 16px;
        &:hover{
          color: #E55555;
        }
        .el-link--inner{
          padding-left: 8px;
        }
      }
    }
   
  }

  .top-message-more:hover,
  .user-box-logout:hover {
    
  }

  .user-box-logout > a {
    height: 32px;
    line-height: 32px;
    width: 100%;
    color: #E55555;
    &:hover{
      background: #F9F9F9;
    }
  }

  // .user-box-logout > a:hover,
  // .user-box-logout > a:focus {
  //   color: #ff7717;
  // }

#screenfull {
  margin-right: 15px;

  svg {
    width: 12px;
    height: 12px;
    margin-bottom: -2px;
  }
}
.content_span {
  color: #212121;
  display: inline-block;
}
.about-platform {
  display: flex;
  height: 128px;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;

  .platform-profile {
    display: flex;
    justify-content: center;

    .platform-detail {
      display: flex;
      flex-direction: column;
      text-align: left;
      justify-content: space-around;

      .platform-name {
        font-size: 24px;
        color: #333;
        font-weight: bold;
      }

      .platform-version {
        font-size: 14px;
        color: #777;
      }
    }
  }

  .icon-hotent-H {
    font-size: 77px;
    background-image: linear-gradient(left bottom, #2274af, #56b0f0);
    background-clip: text;
    color: transparent;
  }
  .copyright {
    color: #999;
    font-size: 13px;
    text-align: center;
  }

  .copyright > a {
    color: #999;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .copyright > a:hover {
    color: #2274af;
  }
}
</style>
